<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<title>兄弟群组选择器</title>
			<style>
			/*⑧⑨兄弟选择器：两种结构①通用兄弟选择器
			                 特点：找到当前元素名字一致的其他元素
							 语法：平行元素选择器~平行元素选择器
			                    ②相邻兄弟选择器
								特点：找到当前元素名字相邻的其他元素
								语法：平行元素选择器~平行元素选择器
							功能：选择平行元素
								
			*/
		  /* h2~span{
			   background-color: #ff5500;
		   }*/
		   h1+span{
			   background-color: #aaff00;
		   }
		   /* ⑩群组选择器：选择所有选中的选择器的元素【针对 群:范围元素】
		      用法：通用选择器下面出现
			  语法：任意选择器，任意选择器
			*/
		   #s1,h2,h1,.s3{
			   background-color: #aaaaff;
		   }
		</style>
	</head>
	<body>
		<h2>通用兄弟选择器</h2>
		<span id="s1">lorem1</span>
		<span>lorem2</span>
		<span class="s3">lorem3</span>
		<h1>相邻兄弟选择器</h1>
		<span>lorem1</span>
		<span>lorem2</span>
		<span>lorem3</span>
		
	</body>
</html>